<template>
  <div>
    <div v-for="item in LanguageList" class="btnGroup">
      <el-button type="warning" @click="handleTypeClick(item.value)">{{
        item.name
      }}</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-dblclick="dblclick"
      v-loading="loading"
    >
      <el-table-column type="index" width="50" />

      <el-table-column width="100" label="歌单">
        <template #default="scope">
          <img :src="scope.row.picUrl" style="width: 75px" />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="" />

      <el-table-column>
        <template #default="scope">
          <span
            v-for="item in scope.row.singer"
            class="artistName"
            @click="toSingerPage(item.id)"
          >
            {{ item.name + "     " }}
          </span>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="scope">
          <span class="artistName" @click="toAlbumPage(scope.row.albumId)">
            {{ scope.row.album }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="playTime" label="" />
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { getNewSong, getSongUrl } from "../../service/songs";
import { storage } from "@/stores/storage";
import { getArtistNames, getSongtime } from "../../utils/practicalFun";
import router from "../../router";
export default defineComponent({
  name: "newSongs",
  mounted() {
    this.getNewSongFun();
  },
  setup() {
    let tableData = ref([]);
    const store = storage();
    const { LanguageList, newSongsList } = storeToRefs(store);
    let loading = ref(true);
    function handleTypeClick(num) {
      store.changeNewSonglanguageType(num);
      getNewSongFun();
    }
    function getNewSongFun() {
      getNewSong(store.newSonglanguageType)
        .then((res) => {
          if (res.status === 200) {
            let data = res.data.data;
            for (let i = 0; i < (data.length >= 20 ? 20 : data.length); i++) {
              tableData.value[i] = {};
              tableData.value[i].playTime = getSongtime(data[i].bMusic.playTime);
              tableData.value[i].name = data[i].name;
              tableData.value[i].id = data[i].id;
              tableData.value[i].singer = getArtistNames(data[i].artists);
              tableData.value[i].album = data[i].album.name;
              tableData.value[i].albumId = data[i].album.id;
              tableData.value[i].picUrl = data[i].album.picUrl;
            }
            loading.value = false;
          } else {
            ElMessage("数据获取失败");
          }
        })
        .catch(function (err) {
          ElMessage("网络错误,请重新尝试");
        });
    }

    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    function toAlbumPage(id) {
      store.setAlbumId(id);
      router.push({
        path: "/album",
      });
    }
    return {
      getNewSongFun,
      newSongsList,
      LanguageList,
      dblclick,
      handleTypeClick,
      toSingerPage,
      tableData,
      toAlbumPage,
      loading,
    };
  },
});
</script>

<style scoped>
.btnGroup {
  margin-top: 10px;
  margin-left: 10px;
  float: inline-start;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: black;
  cursor: pointer;
}
</style>
